/**
 * @author:linjiye
 * @date:2024/12/30
 * @desc:
 **/

import {StyleSheet, TextInput, TouchableOpacity, View} from 'react-native'
import React, {useEffect, useState} from 'react'
import PageScrollView from "@/components/PageScrollView";
import PageTabBar from "@/components/PageTabBar";
import FcButton from "@/components/FcButton";
import {useRouter} from "expo-router";
import Animated from 'react-native-reanimated';
import FcTextInput from "@/components/FcTextInput";
import {useDispatch, useSelector} from "react-redux";
import {set} from "immer/src/utils/common";
import {set_editData} from "@/store/reducer/aiOriginality/aiOriginalitySlice";

type Props = {}

const result = (props: Props) => {
    const [pageScrollBodyH, setPageScrollBodyH] = useState(0)
    const [text,setText] = useState('')
    const router = useRouter();

    const dispatch = useDispatch()
    const editData = useSelector(state => state.aiOriginality.editData)

    useEffect(() => {
        setText(editData.content)
    }, [])

    // @ts-ignore
    function getScrollBodyInfo({height}) {
        setPageScrollBodyH(height)
    }

    function handleTextChange(val: React.SetStateAction<string> | undefined) {
        // @ts-ignore
        setText(val)
    }

    function handleEdit() {
        let obj = {...editData, content: text}
        dispatch(set_editData(obj))
        router.back()
    }

    return (
        <PageScrollView
            isTransparentTab
            viewType={'card'}
            getPageScrollBodyInfo={getScrollBodyInfo}
            bodyStyle={{paddingBottom: 0}}
            pageTab={
                <PageTabBar
                    style={[styles.test,{marginVertical: 10}]}
                    title={'编辑内容'}
                    right={
                        <FcButton
                            onClick={handleEdit}
                            type='BjJB'
                            colors={['#6989FF', '#C65EFD']}
                            style={{width: 48, height: 28, justifyContent: 'center'}}
                            itemStyle={{borderRadius: 8, fontSize: 12}}
                            textName='完成'/>
                    }
                />
            }
        >
            <View style={styles.content_wrap}>
                {/*<Animated.ScrollView>*/}
                {/*    <TextInput*/}
                {/*        style={[styles.item_wrap, {height: pageScrollBodyH - 8}]}*/}
                {/*        multiline={true}*/}
                {/*        // numberOfLines={4}*/}
                {/*        onChangeText={handleTextChange}*/}
                {/*        value={text}*/}
                {/*    />*/}
                {/*</Animated.ScrollView>*/}

                <FcTextInput multiline text={text} placeholder={'请输入编辑内容'}
                             onChangeText={handleTextChange}
                             bodyStyle={{backgroundColor: 'white'}}
                             inputStyle={styles.item_wrap}
                             height={pageScrollBodyH - 16}/>
            </View>
        </PageScrollView>
    );
}

export default result

const styles = StyleSheet.create({

    body_wrap: {
        height: '100%',
        backgroundColor: 'white',
        flexDirection: 'column',
        justifyContent: "space-between",
        borderRadius: 8
    },

    content_wrap: {
        flex: 1,
    },
    item_wrap: {
        color: 'rgba(0, 0, 0, 0.9)',
        fontSize: 17,
        lineHeight: 26,
    },
})